import 'package:flutter/material.dart';

class FormDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => FormState();
}

class FormState extends State<FormDemo> {
  TextEditingController _unamecontroller = TextEditingController();
  TextEditingController _upswcontroller = TextEditingController();
  GlobalKey _formkey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('表单示例'),
        centerTitle: true,
      ),
      body: SingleChildScrollView(
        child: ConstrainedBox(
          constraints: BoxConstraints(minHeight: 300),
          child: Padding(
            padding: EdgeInsets.symmetric(vertical: 16, horizontal: 24),
            child: Form(
              //设置globalkey,用于后面获取FormState
              key: _formkey,
              //开启自动校验
              autovalidateMode: AutovalidateMode.always,
              child: Column(
                children: <Widget>[
                  TextFormField(
                    controller: _unamecontroller,
                    //输入内容格式
                    keyboardType: TextInputType.emailAddress,
                    cursorColor: Theme.of(context).accentColor,
                    decoration: InputDecoration(
                        labelText: '用户名',
                        hintText: '请输入用户名或邮箱',
                        icon: Icon(Icons.person)),
                    validator: (value) =>
                        value!.trim().length > 0 ? null : '用户名不能为空',
                  ),
                  TextFormField(
                    controller: _upswcontroller,
                    keyboardType: TextInputType.number,
                    cursorColor: Theme.of(context).accentColor,
                    decoration: InputDecoration(
                        labelText: '密码',
                        hintText: '请输入密码',
                        icon: Icon(Icons.lock)),
                    //输入内容加密
                    obscureText: true,
                    //验证
                    validator: (value) =>
                        value!.trim().length > 5 ? null : '密码不能少于6位',
                  ),
                  Padding(
                    padding: EdgeInsets.only(top: 28),
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          child: Builder(
                            builder: (ctx) => ElevatedButton(
                              child: Text('登录'),
                              style: ElevatedButton.styleFrom(
                                  //设置字体颜色
                                  onPrimary: Colors.black87,
                                  padding: EdgeInsets.symmetric(vertical: 15),
                                  primary: Theme.of(context).primaryColor,
                                  textStyle: TextStyle(fontSize: 15)),
                              onPressed: () {
                                // 通过Builder来构建登录按钮，
                                // Builder会将FormState节点的context作为回调参数
                                // 由于本widget也是Form的子代widget，所以可以通过下面方式获取FormState
                                if (Form.of(ctx)!.validate()) {
                                  print('验证通过');
                                }
                              },
                            ),
                          ),
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}
